<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- <link rel="apple-touch-icon" type="image/png"
        href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> -->
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <!-- <link rel="shortcut icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> -->

    <!-- <link rel="mask-icon" type=""
        href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
        color="#111" /> -->


    <title>CodePen - Image slider with multiple controls and mobile swipe control (Javascript)</title>




    <style>
        *,
        *:before,
        *:after {
            margin: 0;
            padding: 0;
            box-sizing: inherit;
        }

        html {
            box-sizing: border-box;
            font-family: "Roboto", sans-serif;
            font-size: 62.5%;
        }

        @media only screen and (max-width: 800px) {
            html {
                font-size: 57%;
            }
        }

        body {
            background-color: #000;
            color: #fff;
            padding: 8rem;
        }

        @media only screen and (max-width: 1000px) {
            body {
                padding: 0;
            }
        }

        .container {
            position: relative;
            overflow: hidden;
            border-radius: 5rem;
        }

        @media only screen and (max-width: 1000px) {
            .container {
                border-radius: 0;
            }
        }

        .slider {
            display: flex;
            width: 500%;
            height: 55rem;
            transition: all 0.25s ease-in;
            transform: translateX(0);
        }

        @media only screen and (max-width: 1000px) {
            .slider {
                height: 100vh;
            }
        }

        .slider .box {
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        @media only screen and (max-width: 650px) {
            .slider .box {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(2, 1fr);
            }
        }

        .slider .box .bg {
            padding: 2rem;
            background-color: rgba(0, 0, 0, 0.2);
            width: 55%;
            transform: skewX(7deg);
            position: absolute;
            height: 100%;
            left: -10%;
            padding-left: 20rem;
            transform-origin: 0 100%;
        }

        @media only screen and (max-width: 800px) {
            .slider .box .bg {
                width: 65%;
            }
        }

        @media only screen and (max-width: 650px) {
            .slider .box .bg {
                width: 100%;
                left: 0;
                bottom: 0;
                height: 54%;
                transform: skewX(0deg);
            }
        }

        .slider .box .bg::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: inherit;
            pointer-events: none;
            transform: skewX(10deg);
        }

        @media only screen and (max-width: 650px) {
            .slider .box .bg::before {
                width: 120%;
                bottom: 0;
                transform: skewX(0deg);
            }
        }

        .slider .box .details {
            padding: 5rem;
            padding-left: 10rem;
            z-index: 100;
            grid-column: 1/span 1;
            grid-row: 1/-1;
        }

        @media only screen and (max-width: 650px) {
            .slider .box .details {
                grid-row: 2/span 1;
                grid-column: 1/-1;
                text-align: center;
                padding: 2rem;
                transform: translateY(-9rem);
            }
        }

        .slider .box .details h1 {
            font-size: 3.5rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .slider .box .details p {
            display: inline-block;
            font-size: 1.3rem;
            color: #B5B4B4;
            margin-bottom: 2rem;
            margin-right: 5rem;
        }

        @media only screen and (max-width: 800px) {
            .slider .box .details p {
                margin-right: 0;
            }
        }

        .slider .box .details button {
            padding: 1rem 3rem;
            color: #fff;
            border-radius: 2rem;
            outline: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .slider .box .details button:hover {
            opacity: 0.8;
        }

        .slider .box .details button:focus {
            outline: none;
            border: none;
        }

        .slider .box1 {
            background-color: #500033;
        }

        .slider .box1 .illustration .inner {
            background-color: #FF0077;
        }

        .slider .box1 .illustration .inner::after,
        .slider .box1 .illustration .inner::before {
            background-color: rgba(255, 0, 119, 0.4);
        }

        .slider .box1 button {
            background-color: #FF0077;
        }

        .slider .box2 {
            background-color: #000050;
        }

        .slider .box2 .illustration .inner {
            background-color: #0033FF;
        }

        .slider .box2 .illustration .inner::after,
        .slider .box2 .illustration .inner::before {
            background-color: rgba(0, 51, 255, 0.4);
        }

        .slider .box2 button {
            background-color: #0033FF;
        }

        .slider .box3 {
            background-color: #00501D;
        }

        .slider .box3 .illustration .inner {
            background-color: #00FF44;
        }

        .slider .box3 .illustration .inner::after,
        .slider .box3 .illustration .inner::before {
            background-color: rgba(0, 255, 68, 0.4);
        }

        .slider .box3 button {
            background-color: #00FF44;
        }

        .slider .box4 {
            background-color: #554D00;
        }

        .slider .box4 .illustration .inner {
            background-color: #FF4E00;
        }

        .slider .box4 .illustration .inner::after,
        .slider .box4 .illustration .inner::before {
            background-color: rgba(255, 78, 0, 0.4);
        }

        .slider .box4 button {
            background-color: #FF4E00;
        }

        .slider .box5 {
            background-color: #300050;
        }

        .slider .box5 .illustration .inner {
            background-color: #8000FF;
        }

        .slider .box5 .illustration .inner::after,
        .slider .box5 .illustration .inner::before {
            background-color: rgba(128, 0, 255, 0.4);
        }

        .slider .box5 button {
            background-color: #8000FF;
        }

        .slider .illustration {
            grid-column: 2/-1;
            grid-row: 1/-1;
            justify-self: center;
        }

        @media only screen and (max-width: 650px) {
            .slider .illustration {
                grid-row: 1/span 1;
                grid-column: 1/-1;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .slider .illustration div {
            height: 25rem;
            width: 18rem;
            border-radius: 3rem;
            background-color: #FF0077;
            position: relative;
            transform: skewX(-10deg);
        }

        @media only screen and (max-width: 800px) {
            .slider .illustration div {
                height: 20rem;
                width: 15rem;
            }
        }

        .slider .illustration div::after,
        .slider .illustration div::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            border-radius: 3rem;
            top: 0;
            left: 0;
        }

        .slider .illustration div::after {
            transform: translate(4rem, -1rem);
        }

        .slider .illustration div::before {
            transform: translate(2rem, -2rem);
        }

        .prev,
        .next,
        .trail {
            z-index: 10000;
            position: absolute;
        }

        .prev,
        .next {
            width: 4rem;
            cursor: pointer;
            opacity: 0.2;
            transition: all 0.3s ease;
        }

        @media only screen and (max-width: 650px) {

            .prev,
            .next {
                display: none;
            }
        }

        .prev:hover,
        .next:hover {
            opacity: 1;
        }

        .prev {
            top: 50%;
            left: 2%;
            transform: translateY(-50%);
        }

        .next {
            top: 50%;
            right: 2%;
            transform: translateY(-50%);
        }

        .trail {
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1rem;
            text-align: center;
            font-size: 1.5rem;
        }

        @media only screen and (max-width: 650px) {
            .trail {
                width: 90%;
                bottom: 13%;
            }
        }

        .trail div {
            padding: 2rem;
            border-top: 3px solid #fff;
            cursor: pointer;
            opacity: 0.3;
            transition: all 0.3s ease;
        }

        .trail div:hover {
            opacity: 0.6;
        }

        @media only screen and (max-width: 650px) {
            .trail div {
                padding: 1rem;
            }
        }

        .active {
            opacity: 1 !important;
        }
    </style>

    <script>
        window.console = window.console || function (t) { };
    </script>



    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no">
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
        <!-- <link rel="stylesheet" href="css/style.css"> -->

        <title>Slider</title>
    </head>

    <body>
        <div class="container">
            <div class="slider">

                <div class="box1 box">
                    <div class="bg"></div>
                    <div class="details">
                        <h1>I'm the first Box</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
                            diam, ac mattis orci pellentesque eget.
                        </p>
                        <button>Check Now</button>
                    </div>

                    <div class="illustration">
                        <div class="inner"></div>
                    </div>
                </div>


                <div class="box2 box">
                    <div class="bg"></div>
                    <div class="details">
                        <h1>I'm the second Box</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
                            diam, ac mattis orci pellentesque eget.
                        </p>
                        <button>Check Now</button>
                    </div>

                    <div class="illustration">
                        <div class="inner"></div>
                    </div>
                </div>

                <div class="box3 box">
                    <div class="bg"></div>
                    <div class="details">
                        <h1>I'm the third Box</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
                            diam, ac mattis orci pellentesque eget.
                        </p>
                        <button>Check Now</button>
                    </div>

                    <div class="illustration">
                        <div class="inner"></div>
                    </div>
                </div>

                <div class="box4 box">
                    <div class="bg"></div>
                    <div class="details">
                        <h1>I'm the fourth Box</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
                            diam, ac mattis orci pellentesque eget.
                        </p>
                        <button>Check Now</button>
                    </div>

                    <div class="illustration">
                        <div class="inner"></div>
                    </div>
                </div>

                <div class="box5 box">
                    <div class="bg"></div>
                    <div class="details">
                        <h1>I'm the fifth Box</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
                            diam, ac mattis orci pellentesque eget.
                        </p>
                        <button>Check Now</button>
                    </div>

                    <div class="illustration">
                        <div class="inner"></div>
                    </div>
                </div>

            </div>

            <svg xmlns="http://www.w3.org/2000/svg" class="prev" width="56.898" height="91" viewBox="0 0 56.898 91">
                <path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(0 91) rotate(-90)" fill="#fff" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="next" width="56.898" height="91" viewBox="0 0 56.898 91">
                <path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(56.898) rotate(90)" fill="#fff" />
            </svg>
            <div class="trail">
                <div class="box1 active">1</div>
                <div class="box2">2</div>
                <div class="box3">3</div>
                <div class="box4">4</div>
                <div class="box5">5</div>
            </div>
        </div>

        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js"></script>

        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.2/gsap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.2/CSSRulePlugin.min.js"></script> -->
        <!-- <script src="script.js"></script> -->
    </body>

    </html>
    <!-- <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> -->


    <script id="rendered-js">
        // Slider(all Slides in a container)
        const slider = document.querySelector(".slider");
        // All trails 
        const trail = document.querySelector(".trail").querySelectorAll("div");

        // Transform value
        let value = 0;
        // trail index number
        let trailValue = 0;
        // interval (Duration)
        let interval = 4000;

        // Function to slide forward
        const slide = condition => {
            // CLear interval
            clearInterval(start);
            // update value and trailValue
            condition === "increase" ? initiateINC() : initiateDEC();
            // move slide
            move(value, trailValue);
            // Restart Animation
            animate();
            // start interal for slides back 
            start = setInterval(() => slide("increase"), interval);
        };

        // function for increase(forward, next) configuration
        const initiateINC = () => {
            // Remove active from all trails
            trail.forEach(cur => cur.classList.remove("active"));
            // increase transform value
            value === 80 ? value = 0 : value += 20;
            // update trailValue based on value
            trailUpdate();
        };

        // function for decrease(backward, previous) configuration
        const initiateDEC = () => {
            // Remove active from all trails
            trail.forEach(cur => cur.classList.remove("active"));
            // decrease transform value
            value === 0 ? value = 80 : value -= 20;
            // update trailValue based on value
            trailUpdate();
        };

        // function to transform slide 
        const move = (S, T) => {
            // transform slider
            slider.style.transform = `translateX(-${S}%)`;
            //add active class to the current trail
            trail[T].classList.add("active");
        };

        const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power2.inOut" } });
        tl.from(".bg", { x: "-100%", opacity: 0 }).
            from("p", { opacity: 0 }, "-=0.3").
            from("h1", { opacity: 0, y: "30px" }, "-=0.3").
            from("button", { opacity: 0, y: "-40px" }, "-=0.8");

        // function to restart animation
        const animate = () => tl.restart();

        // function to update trailValue based on slide value
        const trailUpdate = () => {
            if (value === 0) {
                trailValue = 0;
            } else if (value === 20) {
                trailValue = 1;
            } else if (value === 40) {
                trailValue = 2;
            } else if (value === 60) {
                trailValue = 3;
            } else {
                trailValue = 4;
            }
        };

        // Start interval for slides
        let start = setInterval(() => slide("increase"), interval);

        // Next  and  Previous button function (SVG icon with different classes)
        document.querySelectorAll("svg").forEach(cur => {
            // Assign function based on the class Name("next" and "prev")
            cur.addEventListener("click", () => cur.classList.contains("next") ? slide("increase") : slide("decrease"));
        });

        // function to slide when trail is clicked
        const clickCheck = e => {
            // CLear interval
            clearInterval(start);
            // remove active class from all trails
            trail.forEach(cur => cur.classList.remove("active"));
            // Get selected trail
            const check = e.target;
            // add active class
            check.classList.add("active");

            // Update slide value based on the selected trail
            if (check.classList.contains("box1")) {
                value = 0;
            } else if (check.classList.contains("box2")) {
                value = 20;
            } else if (check.classList.contains("box3")) {
                value = 40;
            } else if (check.classList.contains("box4")) {
                value = 60;
            } else {
                value = 80;
            }
            // update trail based on value
            trailUpdate();
            // transfrom slide
            move(value, trailValue);
            // start animation
            animate();
            // start interval
            start = setInterval(() => slide("increase"), interval);
        };

        // Add function to all trails
        trail.forEach(cur => cur.addEventListener("click", ev => clickCheck(ev)));

        // Mobile touch Slide Section
        const touchSlide = (() => {
            let start, move, change, sliderWidth;

            // Do this on initial touch on screen
            slider.addEventListener("touchstart", e => {
                // get the touche position of X on the screen
                start = e.touches[0].clientX;
                // (each slide with) the width of the slider container divided by the number of slides
                sliderWidth = slider.clientWidth / trail.length;
            });

            // Do this on touchDrag on screen
            slider.addEventListener("touchmove", e => {
                // prevent default function
                e.preventDefault();
                // get the touche position of X on the screen when dragging stops
                move = e.touches[0].clientX;
                // Subtract initial position from end position and save to change variabla
                change = start - move;
            });

            const mobile = e => {
                // if change is greater than a quarter of sliderWidth, next else Do NOTHING
                change > sliderWidth / 4 ? slide("increase") : null;
                // if change * -1 is greater than a quarter of sliderWidth, prev else Do NOTHING
                change * -1 > sliderWidth / 4 ? slide("decrease") : null;
                // reset all variable to 0
                [start, move, change, sliderWidth] = [0, 0, 0, 0];
            };
            // call mobile on touch end
            slider.addEventListener("touchend", mobile);
        })();
//# sourceURL=pen.js
    </script>
</body>

</html>